<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒模型</title>
    <style>
        .k{
            width: 100px;
            height: 100px;
            /* 
            实现padding-left跟其他不一样。
            1. 
            padding: 10px;
            padding-left: 20px;
            2.
            padding: 10px 10px 10px 20px;
            3.
            padding-top: 10px;
            padding-right: 10px;
            padding-bottom: 10px;
            padding-left: 20px;
            */
            padding: 10px;
            padding-left: 20px;
            /* 
            先整体，再局部。
            先复合属性设置整体，再单独属性设置局部。
            先一般，再特殊。
            */
            border: 10px solid #000;
            /* 
            border: 10px solid #000;
            等同于：
            border-top:  10px solid #000;
                等同于：
                border-top-width:10px;
                border-top-style:solid;
                border-top-color:#000;
            border-right: 10px solid #000;
            border-bottom: 10px solid #000;
            border-left: 10px solid #000; 
            等同于：
            border-width：10px;
                等同于：
                border-top-width:10px;
                border-right-width:10px;
                border-bottom-width:10px;
                border-left-width:10px;
            border-style: solid;
            border-color: #000;
            */
            margin: 20px 10px 5px 2px;
            background: red;
        }
        .k2{
            /* margin可以是负值。 */
            margin-top: -10px;
        }
        .k:nth-child(3){
            border-style: outset;
            border-color: green;
        }
    </style>
</head>
<body>
<!-- 
    任何一个元素在网页中都以盒子的形式存在。
    跟盒子相关的属性
        尺寸与补白
            width	 	定义了元素内容区（Content Area）的宽度
            min-width	定义了元素内容区（Content Area）的最小宽度
            max-width	定义了元素内容区（Content Area）的最大宽度
            如果有固定大小，设置width。否则固定大小，可以设置min-width和max-width。
            height	    定义了元素内容区（Content Area）的高度
            min-height	定义了元素内容区（Content Area）的最小高度
            max-height	定义了元素内容区（Content Area）的最大高度

            padding	    为元素设置所有四个方向（上右下左）的内边距，即内容和元素边界之间的空间
                内补白，内边距，内容和边框之间的距离，填充
                简写属性。
                    padding是padding-top、padding-right、padding-bottom、padding-left四个属性的复合属性。
                    padding-*：<length> | <percentage>
                        padding-* = padding-top,padding-right,padding-bottom,padding-left
                    
                padding：[ <length> | <percentage> ]{1,4}
                    取值可以数字、百分比
                    数字可以有1个、2个、3个、4个。
                padding的值可以为1-4个。
                    1个，四个取值都一样。
                    2个，上下一个值，左右一个值。
                    3个，上、右、下值，左边空缺取对面。
                    4个，上、右、下、左四个值。
                默认情况下，padding上有背景。
            margin	    为元素设置所有四个方向（上右下左）的外边距
                wai补白，wai边距，边框之外的距离
                margin[ <length> | <percentage> | auto ]{1,4}
                    取值可以数字、百分比、auto。
                    margin可以是负值。
                    数字可以有1个、2个、3个、4个。 
                默认情况下，margin上没有背景。  


        背景与边框
            border        简写属性。定义元素边框的外观特性。参阅outline属性。
                border：<line-width> || <line-style> || <color>
                border-*：<line-width> || <line-style> || <color>
                    border-* = border-top,border-right,border-bottom,border-left
                
                border: 10px solid #000;
                等同于：
                    border-top-color: rgb(0, 0, 0);
                    border-top-style: solid;
                    border-top-width: 10px;
                    border-right-color: rgb(0, 0, 0);
                    border-right-style: solid;
                    border-right-width: 10px;
                    border-bottom-color: rgb(0, 0, 0);
                    border-bottom-style: solid;
                    border-bottom-width: 10px;
                    border-left-color: rgb(0, 0, 0);
                    border-left-style: solid;
                    border-left-width: 10px;
                    border-image-source: initial;
                    border-image-slice: initial;
                    border-image-width: initial;
                    border-image-outset: initial;
                    border-image-repeat: initial;
                
                默认情况下，border上有背景。
                
                border-width 边框宽度（长度+单位）
                border-style 边框样式（分类值，从诸多分类里选一个）
                    <line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
                        solid dashed dotted double 
                        inset outset ridge groove
                        hidden
                        none
                        inherit initial unset
                border-color 边框颜色（颜色值，颜色名、十六进制表示、rgb、hsl、rgba、hsla、transparent）

            box-shadow    定义元素的阴影
                box-shadow：none | <shadow> [ , <shadow> ]*
                <shadow> = inset? && <length>{2,4} && <color>?
            text-shadow
                
            border-radius 简写属性。定义元素的圆角
                border-radius：[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?
                border-*-radius：[ <length> | <percentage> ]{1,2}
                border-*-radius = border-top-left-radius,border-top-right-radius,border-bottom-right-radius,border-bottom-left-radius

            border-image  简写属性。定义将图像应用到元素的边框上
            background	  简写属性。定义元素的背景特性
    从内往外
        width、height  蓝色区域
        padding        绿色区域
        border         黄色区域
        margin         棕色区域
    盒子的实际大小
        宽度 = width+padding（左右）+border（左右）
    盒子占用空间大小
        宽度 = width+padding（左右）+border（左右）+margin 

    display:block; 块状元素： h1 p div
    display:inline; 行内元素： a b i span。
        没有宽和高，至少宽和高不正常。
        没有竖直方向的margin。  
        竖直方向的边框会有问题。           
    display:inline-block;  行内块元素。

    利用盒模型计算距离。
    
-->
    <div class="k">1</div>
    <div class="k k2">2</div>
    <div class="k">3</div>
</body>
</html>